<template>
    <div>
        <div class="container main">
            <div class="m-page">
                <div class="m-steps">
                    <steps :step="step"></steps>
                </div>
                <div class="m-box">
                    <div class="box-content">
                        <div class="c-success">
                            <img src="../../../static/images/save_success.png" alt="">
                            提交成功！
                        </div>
                        <div class="c-text">订单已提交成功，您可继续选购商品、服务。也可进入我的订单进行详情查看或撤销操作。若确认无误，可进入结算付款环节</div>
                        <div class="c-btns">
                            <span><button class="pay" @click="go_page('/ServiceSupermarket/BuyStep2')">付款结算</button></span>
                            <span><button class="look" @click="go_page('/ServiceSupermarket/OrderDetail')">查看我的订单</button></span>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>
import steps from '../../views/supermarket/Steps';
import headlogin from '../../views/localPage/headlogin';
export default {
    data(){
        return{
            step:0,//步骤
        }
    },
    methods:{
        // 导航栏
        getItme: function(item, index) {
            this.cur = index;
            switch(index)
            {
                case 0:
            
                this.$router.push({ path:'/ServiceSupermarket/Home'})
                break;
                case 1:
        
                this.$router.push({ path:'/ServiceSupermarket/GatheringCenter'})
                break;
                case 2:
            
                this.$router.push({ path:'/ServiceSupermarket/ServiceOrganization'})
                break;
                case 3:
                
                this.$router.push({ path:'/ServiceSupermarket/ServiceConsultant'})
                break;
                case 4:
                
                this.$router.push({ path:'/ServiceSupermarket/About'})
                break;
            }
        },
        //点击付款结账 或 查看订单
        go_page(page){
            this.$router.push({path:page})
        }
    },
    components:{
        steps,
        headlogin
    }
}
</script>
<style lang="less" scoped>
.m-page{
    background: #F3F3F3;
    padding: 60px 20px 300px;
    color: #333333;
    font-family:MicrosoftYaHei;
    font-weight:400;
    .m-box{
        width: 949px;
        margin: 0 auto;
        background: #fff;
        margin-top: 80px;
        border-radius:8px;
        overflow: hidden;
        .box-content{
            width: 630px;
            margin: 0 auto;
            padding: 169px 0;
            text-align: center;
            .c-success{
                font-size: 36px;
                color: #1575F9;
            }
            .c-text{
                color: #666666;
                font-size: 16px;
                line-height: 40px;
                margin-top: 40px;
            }
            .c-btns{
                margin-top: 100px;
                &>span{
                    margin-right: 80px;
                    button{
                        height: 38px;
                        width: 126px;
                        color: #fff;
                        border-radius: 5px;
                        border: none;
                        &.pay{
                            background: #1575F9;
                        }
                        &.look{
                            background: #999999;
                        }
                    }
                    &:last-child{
                        margin-right: 0;
                    }
                }
            }
        }
    }
}
</style>
